import React, { Component } from "react";
import { Card, Row, Col } from "antd";
import "./ExamList.less";
import Status from "@/components/Status/Status";
import AsideFilter from "@/components/Filter/AsideFilter";

const statusMap = {
    ongoing: "success",
    notStart: "error",
    over: "invalid",
    cancel: "warn",
    success: 'success',
    error: 'error',
    warn: 'warn',
    invalid: 'invalid',
}
const text = {
    success: "进行中",
    error: "未开始",
    warn: "已取消",
    invalid: "已结束",
};

const filterConfig = [
    {
        key: "exam_status",
        type: "Selectors",
        options: ["进行中", "未开始", "已取消", "已结束"],
        label: "考试状态",
    },
    {
        key: "date",
        type: "RangePicker",
        label: "时间",
    },
];

class ExamList extends Component {
    constructor(props) {
        super(props)
        this.createCard = this.createCard.bind(this)
    }

    createCard(data) {
        let card = null
        if (data instanceof Object) {
            const { onHoverList, key, title, status, startTime, endTime } = data
            const detailBtn = []
            if (onHoverList instanceof Array) {
                onHoverList.forEach((config, index) => {
                    if (config.show) {
                        if (config.onClick instanceof Function) {
                            detailBtn.push(<a
                                key={index}
                                onClick={config.onClick}
                            >
                                {config.text}
                            </a>)
                        } else {
                            detailBtn.push(<a
                                key={index}>
                                {config.text}
                            </a>)
                        }
                    }
                })
            }

            card = <Card
                key={key}
                title={title}
                className="card"
                extra={<Status status={statusMap[status]} text={text[statusMap[status]]} />}
                hoverable={true}
            >
                {detailBtn.length > 0 ?
                    <div className="detail-btn">
                        {detailBtn}
                    </div> : null
                }
                <Row style={{ marginBottom: "8px" }}>
                    <Col>开始时间：</Col>
                    <Col span={16}>{startTime}</Col>
                </Row>
                <Row style={{ marginBottom: "8px" }}>
                    <Col>结束时间：</Col>
                    <Col span={16}>{endTime}</Col>
                </Row>
                <Row style={{ marginBottom: "8px" }}>
                    <Col>参与班级：</Col>
                    <Col span={16}>{data.class?.join?.("、")}</Col>
                </Row>
            </Card>
        }
        return card
    }

    render() {
        const { dataSource } = this.props;
        return (
            <div className="exam-list">
                {/* <AsideFilter
                    filterConfig={filterConfig}
                    onFilter={(value) => {
                        console.log(value);
                    }}
                /> */}
                <div className="card-list-container">
                    {(() => {
                        if (dataSource instanceof Array) {
                            return dataSource.map((data) => {
                                return this.createCard(data)
                            });
                        }
                        return null;
                    })()}
                </div>
            </div>
        );
    }
}

export default ExamList
